<template>
	<view class="container">
		<view class="post" @click="goToPost">
			<u-icon name="plus-circle" color="#d81e06" class="icon" :size="26"></u-icon>
		</view>
		<view class="item" v-for="item in list" :key="item.pyqId" @click="goToDetail(item)">
			<view class="top">
				<view class="avatar"><img :src="item.user.avatar"></view>
			</view>
			<view class="right">
				<view class="name">{{item.user.name}}</view>
				<view class="content">{{item.pyqContent}}</view>
				<view class="picture"><img :src="item.pyqPicture"></view>
				<view class="time">{{item.gmtCreate}}</view>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				status: 'loading',
				isBottomRefresh: false,
				list: []

			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			// 每次页面触底调用方法读取更多数据
			this.page++ //每次触底查询页码加一
			this.isBottomRefresh = true //标识是触底操作
			setTimeout(() => {
				if (this.status == 'noMore') return // 没有更多数据之后 就不会在触底加载
				this.getList()
			}, 500)
		},
		methods: {
			// 判断是否已登录
			async checkLogin() {
				if (uni.getStorageSync("token")) {
					// 获取用户信息
					const {
						data: res
					} = await this.$myRequest({
						url: '/loginBefore/getMemberInfo',
						header: {
							'content-type': 'application/json;charset:utf-8',
							'token': uni.getStorageSync("token"),
						}
					})
					console.log(res);
					if (res.code == 20000) {
						this.userInfo.avatar = res.data.userInfo.avatar
						this.userInfo.name = res.data.userInfo.name
						// 将用户id放进缓存
						uni.setStorageSync('userId', res.data.userInfo.userId)
					} else if (res.code == 20001) {
						uni.showToast({
							title: '登录已过期,请重新登录!',
							icon: 'none'
						})
						uni.clearStorageSync()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/Mine/Login'
							})
						}, 2000)

					}
				} else {
					uni.showToast({
						title: '请先登录!',
						icon: 'error'
					});
				}
			},
			// 获取动态列表
			async getList() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/PyqBefore/getPyq/' + this.page + '/' + '/10',
				})
				if (res.code == 20000) {
					console.log(res);
					if (this.isBottomRefresh) { //判断是第一次获取数据还是触底加载新数据
						this.list = this.list.concat(res.data.list)
					} else {
						this.list = res.data.list
					}
					this.ifBottomRefresh = false
					console.log(this.list);
				}
				this.status = this.list.length < res.data.total ? 'loading' : 'noMore'
			},
			// 跳转到动态详情页
			goToDetail(item) {
				uni.navigateTo({
					url: '/pages/Activity/ActivityDetail?info=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 跳转到发布动态页面
			goToPost() {
				if (!uni.getStorageSync('userId')) {
					this.checkLogin()
				} else {
					uni.navigateTo({
						url: '/pages/Post'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.post {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx;
	}

	.item {
		border-bottom: 1px solid #8e8e8e;
		padding: 30rpx 30rpx 0;
		display: flex;

		.top {
			display: flex;
			height: 80rpx;

			.avatar {
				margin-right: 20rpx;

				img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}

			}

		}

		.name {
			color: #d81e06;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.picture {
			img {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.time {
			color: #8e8e8e;
			font-size: 24rpx;
		}


	}
</style>
